<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>中国美食分布可视化大屏</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
    <script src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=Q2NVJyoTAdpPKHfLmqmVfFwAjQOcptHm"></script>

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
        }

        body {
            background: linear-gradient(135deg, #ffe4b5 0%, #ffdab9 100%);
            color: #333;
            line-height: 1.6;
            overflow-x: hidden;
        }

        .container {
            max-width: 1920px;
            margin: 0 auto;
            padding: 20px;
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: 20px;
            min-height: 100vh;
        }

        .header {
            grid-column: 1/3;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding: 15px 30px;
            background: rgba(255, 235, 205, 0.7);
            border-radius: 15px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
        }

        .logo {
            font-size: 2.5rem;
            font-weight: 700;
            color: #ff8c00;
            animation: bounce 2s infinite alternate;
            text-shadow: 0 0 10px rgba(255, 140, 0, 0.5);
        }

        .time-display {
            font-size: 1.2rem;
            color: rgba(51, 51, 51, 0.7);
            background: rgba(255, 255, 255, 0.2);
            padding: 8px 15px;
            border-radius: 20px;
        }

        .main-map {
            grid-column: 1/3;
            height: 700px;
            border-radius: 20px;
            box-shadow: 0 0 40px rgba(0, 0, 0, 0.3);
            position: relative;
            overflow: hidden;
            background: rgba(255, 235, 205, 0.6);
            z-index: 10;
        }

        /* 侧边信息框样式 */
        .side-info {
            position: fixed;
            top: 0;
            height: 100vh;
            width: 300px;
            background: rgba(255, 235, 205, 0.95);
            border: 1px solid rgba(255, 140, 0, 0.2);
            box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
            z-index: 100;
            transform: translateX(-320px);
            transition: transform 0.5s ease;
            overflow-y: auto;
        }

        .side-info.right {
            right: 0;
            transform: translateX(320px);
        }

        .side-info.show {
            transform: translateX(0);
        }

        .side-info.right.show {
            transform: translateX(0);
        }

        .info-header {
            padding: 15px 20px;
            border-bottom: 1px solid rgba(255, 140, 0, 0.2);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .info-title {
            color: #ff8c00;
            font-size: 1.5rem;
            font-weight: bold;
        }

        .close-btn {
            background: none;
            border: none;
            color: #333;
            font-size: 1.5rem;
            cursor: pointer;
            transition: color 0.3s;
        }

        .close-btn:hover {
            color: #ff8c00;
        }

        .info-content {
            padding: 20px;
        }

        .province-cuisine {
            margin-bottom: 20px;
        }

        .cuisine-name {
            font-size: 1.2rem;
            color: #ff8c00;
            margin-bottom: 10px;
            padding-bottom: 10px;
            border-bottom: 1px solid rgba(255, 140, 0, 0.2);
        }

        .dish-list {
            list-style: none;
        }

        .dish-list li {
            margin-bottom: 8px;
            padding-left: 20px;
            position: relative;
        }

        .dish-list li:before {
            content: "🍽️";
            position: absolute;
            left: 0;
            color: #ff8c00;
        }

        .province-desc {
            margin-top: 20px;
            line-height: 1.8;
            color: rgba(51, 51, 51, 0.8);
        }

        .mask {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            background: rgba(0, 0, 0, 0.5);
            z-index: 9;
            display: none;
            transition: all 0.3s;
        }

        .mask.show {
            display: block;
        }

        .side-panel {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .announcement,
        .video-container,
        .chart-panel {
            background: rgba(255, 235, 205, 0.8);
            border-radius: 15px;
            padding: 20px;
            animation: fadeIn 0.8s ease-out;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
            border: 1px solid rgba(255, 140, 0, 0.1);
        }

        .chart-title {
            color: #ff8c00;
            font-size: 1.5rem;
            margin-bottom: 15px;
            border-bottom: 2px solid rgba(255, 140, 0, 0.2);
            padding-bottom: 10px;
            display: flex;
            align-items: center;
        }

        .chart-title::before {
            content: '';
            display: inline-block;
            width: 6px;
            height: 24px;
            background: #ff8c00;
            margin-right: 10px;
            border-radius: 3px;
        }

        .dish-gallery {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
            margin-top: 20px;
        }

        .dish-image {
            width: 100%;
            height: 150px;
            object-fit: cover;
            border-radius: 10px;
            transition: all 0.3s ease;
            cursor: pointer;
            border: 2px solid transparent;
        }

        .dish-image:hover {
            transform: translateY(-5px);
            border-color: #ff8c00;
            box-shadow: 0 5px 15px rgba(255, 140, 0, 0.3);
        }

        #baiduMapContainer {
            display: none;
            grid-column: 1/3;
            height: 700px;
            border-radius: 20px;
            box-shadow: 0 0 40px rgba(0, 0, 0, 0.3);
            position: relative;
            overflow: hidden;
        }

        #backButton {
            position: absolute;
            top: 15px;
            left: 15px;
            padding: 8px 15px;
            background: linear-gradient(135deg, #ff8c00, #ff6347);
            color: #fff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            display: none;
            z-index: 1000;
            font-weight: bold;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
            transition: all 0.3s ease;
        }

        #backButton:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(255, 140, 0, 0.4);
        }

        #backButton i {
            margin-right: 5px;
        }

        .video-container iframe {
            width: 100%;
            height: 400px;
            border-radius: 10px;
        }

        .chart-container {
            height: 300px;
            margin-top: 10px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 10px;
            padding: 10px;
        }

        .footer {
            grid-column: 1/3;
            text-align: center;
            padding: 15px;
            color: rgba(51, 51, 51, 0.6);
            font-size: 0.9rem;
            border-top: 1px solid rgba(51, 51, 51, 0.1);
            margin-top: 20px;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes bounce {
            from {
                transform: translateY(0);
            }

            to {
                transform: translateY(-10px);
            }
        }

        @keyframes pulse {
            0% {
                box-shadow: 0 0 0 0 rgba(255, 140, 0, 0.7);
            }

            70% {
                box-shadow: 0 0 0 10px rgba(255, 140, 0, 0);
            }

            100% {
                box-shadow: 0 0 0 0 rgba(255, 140, 0, 0);
            }
        }

        .map-title {
            position: absolute;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(255, 235, 205, 0.7);
            padding: 10px 20px;
            border-radius: 30px;
            z-index: 100;
            font-size: 1.2rem;
            color: #ff8c00;
            animation: pulse 2s infinite;
        }

        @media (max-width: 1200px) {
            .container {
                grid-template-columns: 1fr;
            }

            .side-panel {
                grid-column: 1/3;
            }

            .side-info {
                width: 280px;
            }
        }

        @media (max-width: 768px) {
            .side-info {
                width: 250px;
            }

            .main-map {
                height: 500px;
            }
        }
    </style>
</head>

<body>
<div class="container">
    <header class="header">
        <div class="logo">🍜 中国美食地图</div>
        <div class="time-display" id="showTime"></div>
    </header>
    <!-- 主地图区域 -->
    <div class="main-map" id="chinaMap">
        <div class="map-title">中国美食分布图 - 点击省份查看详细信息</div>
    </div>
    <!-- 百度地图容器 -->
    <div id="baiduMapContainer"></div>
    <!-- 遮罩层 -->
    <div class="mask" id="mask"></div>
    <!-- 左侧信息框 -->
    <div class="side-info" id="leftInfo">
        <div class="info-header">
            <h3 class="info-title" id="infoTitle">省份美食信息</h3>
            <button class="close-btn" id="closeLeft">×</button>
        </div>
        <div class="info-content" id="leftContent">
            <p>点击地图上的省份查看详细信息</p>
        </div>
    </div>
    <!-- 右侧信息框 -->
    <div class="side-info right" id="rightInfo">
        <div class="info-header">
            <h3 class="info-title" id="rightInfoTitle">代表菜品展示</h3>
            <button class="close-btn" id="closeRight">×</button>
        </div>
        <div class="info-content" id="rightContent">
            <div class="dish-gallery" id="provinceDishes">
                <!-- 菜品图片将动态加载 -->
            </div>
        </div>
    </div>
    <!-- 左侧面板（原内容） -->
    <div class="side-panel">
        <div class="announcement">
            <h2 class="chart-title">系统公告</h2>
            <p>欢迎使用中国美食分布可视化系统！本系统展示了中国各地的特色美食分布情况。</p>
            <p>使用说明：</p>
            <ul>
                <li>点击地图上的省份查看该地区详细信息</li>
                <li>使用两侧信息框按钮可关闭详情</li>
                <li>右侧信息框展示该地区代表菜品</li>
            </ul>
        </div>
        <div class="video-container">
            <h2 class="chart-title">美食纪录片</h2>
            <!-- 确保使用 HTTPS 链接 -->
            <iframe src="https://player.bilibili.com/player.html?bvid=BV1EKSvY8Ep3&high_quality=1&danmaku=0"
                    frameborder="0" allowfullscreen></iframe>
        </div>
        <div class="chart-panel">
            <h2 class="chart-title">代表菜品展示</h2>
            <div class="dish-gallery">
                <img src="https://images.unsplash.com/photo-1563245372-f21724e3856d?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80"
                     alt="北京烤鸭" class="dish-image">
                <img src="https://images.unsplash.com/photo-1563245372-f21724e3856d?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80"
                     alt="麻婆豆腐" class="dish-image">
                <img src="https://images.unsplash.com/photo-1563245372-f21724e3856d?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80"
                     alt="广东点心" class="dish-image">
                <img src="https://images.unsplash.com/photo-1563245372-f21724e3856d?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80"
                     alt="上海小笼包" class="dish-image">
            </div>
        </div>
    </div>
    <!-- 右侧图表面板 -->
    <div class="side-panel">
        <div class="chart-panel">
            <h2 class="chart-title">区域销量对比</h2>
            <div class="chart-container" id="barChart"></div>
        </div>
        <div class="chart-panel">
            <h2 class="chart-title">品类趋势分析</h2>
            <div class="chart-container" id="lineChart"></div>
        </div>
        <div class="chart-panel">
            <h2 class="chart-title">最受欢迎菜系</h2>
            <div class="chart-container" id="pieChart"></div>
        </div>
    </div>
    <div class="footer">
        <p>© 2023 中国美食文化研究中心 | 数据更新时间: 2023年12月</p>
    </div>

    <!-- 返回按钮 -->
    <button id="backButton" onclick="showOriginalMap()"><i class="fa fa-arrow-left"></i> 返回原地图</button>
</div>
<script src="js/jquery.js"></script>
<script src="js/echarts.min.js"></script>
<script src="js/china.js"></script>
<script>
    // 时间显示
    function updateTime() {
        const now = new Date();
        document.getElementById('showTime').textContent =
            now.toLocaleString('zh-CN', {
                year: 'numeric',
                month: 'long',
                day: 'numeric',
                hour: '2-digit',
                minute: '2-digit',
                second: '2-digit',
                hour12: false
            });
    }
    setInterval(updateTime, 1000);
    updateTime();

    // 省份中心经纬度映射
    const provinceCenters = {
        "北京": [116.4074, 39.9042],
        "天津": [117.1901, 39.1255],
        "上海": [121.4737, 31.2304],
        "重庆": [106.504962, 29.533155],
        "河北": [114.502461, 38.045474],
        "山西": [112.549248, 37.857014],
        "内蒙古": [111.670801, 40.818311],
        "辽宁": [123.429096, 41.796767],
        "吉林": [125.3245, 43.886841],
        "黑龙江": [126.642464, 45.756967],
        "江苏": [118.767413, 32.041544],
        "浙江": [120.153576, 30.287459],
        "安徽": [117.283042, 31.86119],
        "福建": [119.306239, 26.075302],
        "江西": [115.892151, 28.676493],
        "山东": [117.000923, 36.675807],
        "河南": [113.665412, 34.757975],
        "湖北": [114.298572, 30.584355],
        "湖南": [112.982279, 28.19409],
        "广东": [113.280637, 23.125178],
        "广西": [108.320004, 22.82402],
        "海南": [110.33119, 20.031971],
        "四川": [104.065735, 30.659462],
        "贵州": [106.713478, 26.578343],
        "云南": [102.712251, 25.040609],
        "西藏": [91.132212, 29.660361],
        "陕西": [108.948024, 34.263161],
        "甘肃": [103.823557, 36.058039],
        "青海": [101.778916, 36.623178],
        "宁夏": [106.278179, 38.46637],
        "新疆": [87.617733, 43.792818],
        "台湾": [121.509062, 25.044332],
        "香港": [114.173355, 22.320048],
        "澳门": [113.54909, 22.198951]
    };

    // 模拟美食数据（扩展了所有省份）
    const cuisineData = {
        "北京": {
            cuisine: "京菜",
            dishes: ["北京烤鸭", "涮羊肉", "炸酱面", "豆汁儿"],
            description: "北京菜以宫廷菜、官府菜和清真菜为主，口味偏咸鲜，注重色、香、味、形的统一。",
            image: "https://images.unsplash.com/photo-1563245372-f21724e3856d?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80"
        },
        "天津": {
            cuisine: "津菜",
            dishes: ["狗不理包子", "煎饼果子", "耳朵眼炸糕", "十八街麻花"],
            description: "津菜擅长炸、烹、爆、炒，以鲜咸为主，讲究清、淡、嫩、烂。",
            image: "https://images.unsplash.com/photo-1563245372-f21724e3856d?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80"
        },
        "上海": {
            cuisine: "本帮菜",
            dishes: ["上海小笼包", "生煎包", "响油鳝糊", "油爆虾"],
            description: "本帮菜口味浓油赤酱，咸淡适中，烹调方法以红烧、生煸、滑炒、蒸为主。",
            image: "https://images.unsplash.com/photo-1563245372-f21724e3856d?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80"
        },
        "重庆": {
            cuisine: "渝菜",
            dishes: ["重庆火锅", "毛血旺", "辣子鸡", "水煮鱼"],
            description: "渝菜以麻辣、鲜香、味厚著称，善用辣椒、花椒等调料。",
            image: "https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80"
        },
        "河北": {
            cuisine: "冀菜",
            dishes: ["驴肉火烧", "锅包肘子", "金毛狮子鱼", "李鸿章大烩菜"],
            description: "冀菜选料广泛，注重火候和调味，口味咸鲜。",
            image: "https://images.unsplash.com/photo-1563245372-f21724e3856d?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80"
        },
        "山西": {
            cuisine: "晋菜",
            dishes: ["过油肉", "刀削面", "平遥牛肉", "太原头脑"],
            description: "晋菜以咸香为主，擅长炒、熘、烩、烧等技法，面食文化丰富。",
            image: "https://images.unsplash.com/photo-1563245372-f21724e3856d?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80"
        },
        "内蒙古": {
            cuisine: "蒙餐",
            dishes: ["手把羊肉", "烤全羊", "奶茶", "奶皮子"],
            description: "蒙餐以牛羊肉、奶制品为主，口味醇厚，具有浓郁的草原风味。",
            image: "https://images.unsplash.com/photo-1563245372-f21724e3856d?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80"
        },
        "辽宁": {
            cuisine: "辽菜",
            dishes: ["锅包肉", "猪肉炖粉条", "小鸡炖蘑菇", "溜肉段"],
            description: "辽菜以咸鲜为主，讲究火候和调味，融合了满、蒙、汉等多民族风味。",
            image: "https://images.unsplash.com/photo-1563245372-f21724e3856d?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80"
        },
        "吉林": {
            cuisine: "吉菜",
            dishes: ["三套碗", "清蒸白鱼", "人参鸡", "渍菜粉"],
            description: "吉菜融合了满族、朝鲜族等民族风味，口味醇厚，注重营养。",
            image: "https://images.unsplash.com/photo-1563245372-f21724e3856d?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80"
        },
        "黑龙江": {
            cuisine: "龙江菜",
            dishes: ["红肠", "锅包肉（改良版）", "得莫利炖鱼", "地三鲜"],
            description: "龙江菜以炖、炒、烤等技法为主，口味咸鲜，受俄罗斯饮食文化影响。",
            image: "https://images.unsplash.com/photo-1563245372-f21724e3856d?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80"
        },
        "江苏": {
            cuisine: "苏菜",
            dishes: ["狮子头", "松鼠桂鱼", "盐水鸭", "扬州炒饭"],
            description: "苏菜擅长炖、焖、蒸、炒，重视调汤，保持原汁，风味清鲜，浓而不腻，淡而不薄。",
            image: "https://images.unsplash.com/photo-1563245372-f21724e3856d?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80"
        },
        "浙江": {
            cuisine: "浙菜",
            dishes: ["东坡肉", "西湖醋鱼", "龙井虾仁", "叫化鸡"],
            description: "浙菜选料讲究，烹饪独到，注重本味，制作精细，以清、香、脆、嫩、爽、鲜为特色。",
            image: "https://images.unsplash.com/photo-1563245372-f21724e3856d?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80"
        },
        "安徽": {
            cuisine: "徽菜",
            dishes: ["臭鳜鱼", "李鸿章大杂烩", "问政山笋", "胡适一品锅"],
            description: "徽菜以重油、重色、重火功闻名，擅长烧、炖、蒸，讲究火候的掌握。",
            image: "https://images.unsplash.com/photo-1563245372-f21724e3856d?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80"
        },
        "福建": {
            cuisine: "闽菜",
            dishes: ["佛跳墙", "荔枝肉", "土笋冻", "鱼丸"],
            description: "闽菜以海鲜为主，口味清鲜、和醇、荤香、不腻，注重调汤，具有典型的南国风味。",
            image: "https://images.unsplash.com/photo-1563245372-f21724e3856d?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80"
        },
        "江西": {
            cuisine: "赣菜",
            dishes: ["粉蒸肉", "瓦罐汤", "藜蒿炒腊肉", "四星望月"],
            description: "赣菜口味以鲜辣为主，讲究火候和调味，擅长烧、炒、炖等技法。",
            image: "https://images.unsplash.com/photo-1563245372-f21724e3856d?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80"
        },
        "山东": {
            cuisine: "鲁菜",
            dishes: ["糖醋鲤鱼", "九转大肠", "葱烧海参", "锅塌豆腐"],
            description: "鲁菜讲究原料质地优良，以盐提鲜，以汤壮鲜，调味讲求咸鲜纯正，突出本味。",
            image: "https://images.unsplash.com/photo-1563245372-f21724e3856d?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80"
        },
        "河南": {
            cuisine: "豫菜",
            dishes: ["烩面", "洛阳水席", "糖醋软熘鱼焙面", "道口烧鸡"],
            description: "豫菜选料严谨、刀工精细、讲究制汤、质味适中，具有深厚的文化底蕴。",
            image: "https://images.unsplash.com/photo-1563245372-f21724e3856d?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80"
        },
        "湖北": {
            cuisine: "鄂菜",
            dishes: ["武昌鱼", "热干面", "排骨藕汤", "沔阳三蒸"],
            description: "鄂菜以水产为本，鱼馔为主，汁浓芡亮，香鲜微辣，注重本色，讲究火功。",
            image: "https://images.unsplash.com/photo-1563245372-f21724e3856d?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80"
        },
        "湖南": {
            cuisine: "湘菜",
            dishes: ["剁椒鱼头", "湘西腊肉", "小炒黄牛肉", "臭豆腐"],
            description: "湘菜以辣著称，讲究香辣、麻辣、酸辣，注重食材本味，善于调味和火候控制。",
            image: "https://images.unsplash.com/photo-1563245372-f21724e3856d?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80"
        },
        "广东": {
            cuisine: "粤菜",
            dishes: ["白切鸡", "烧鹅", "虾饺", "叉烧包"],
            description: "粤菜注重质和味，口味比较清淡，力求清中求鲜、淡中求美，讲究火候和油温。",
            image: "https://images.unsplash.com/photo-1563245372-f21724e3856d?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80"
        },
        "广西": {
            cuisine: "桂菜",
            dishes: ["螺蛳粉", "桂林米粉", "老友粉", "柠檬鸭"],
            description: "桂菜口味多样，以清淡、鲜香、酸甜为主，融合了少数民族的饮食特色。",
            image: "https://images.unsplash.com/photo-1563245372-f21724e3856d?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80"
        },
        "海南": {
            cuisine: "琼菜",
            dishes: ["文昌鸡", "加积鸭", "东山羊", "和乐蟹"],
            description: "琼菜以清淡鲜美、原汁原味为特色，注重食材的新鲜度。",
            image: "https://images.unsplash.com/photo-1563245372-f21724e3856d?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80"
        },
        "四川": {
            cuisine: "川菜",
            dishes: ["麻婆豆腐", "回锅肉", "宫保鸡丁", "水煮鱼"],
            description: "川菜以麻辣著称，讲究麻、辣、鲜、香，调味多变，菜式多样，口味清鲜醇浓并重。",
            image: "https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80"
        },
        "贵州": {
            cuisine: "黔菜",
            dishes: ["酸汤鱼", "丝娃娃", "恋爱豆腐果", "花江狗肉"],
            description: "黔菜口味以辣、酸为主，具有浓郁的地方特色和民族风情。",
            image: "https://images.unsplash.com/photo-1563245372-f21724e3856d?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80"
        },
        "云南": {
            cuisine: "滇菜",
            dishes: ["过桥米线", "汽锅鸡", "野生菌火锅", "鲜花饼"],
            description: "滇菜选料广泛，口味多样，具有鲜明的民族特色和地域风情。",
            image: "https://images.unsplash.com/photo-1563245372-f21724e3856d?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80"
        },
        "西藏": {
            cuisine: "藏餐",
            dishes: ["酥油茶", "青稞酒", "牦牛肉干", "藏式包子"],
            description: "藏餐以牛羊肉、青稞等为主要食材，具有浓郁的高原特色。",
            image: "https://images.unsplash.com/photo-1563245372-f21724e3856d?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80"
        },
        "陕西": {
            cuisine: "陕菜",
            dishes: ["肉夹馍", "羊肉泡馍", "凉皮", "biangbiang面"],
            description: "陕菜以咸鲜为主，擅长蒸、煮、炖、炒等技法，面食文化丰富。",
            image: "https://images.unsplash.com/photo-1563245372-f21724e3856d?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80"
        },
        "甘肃": {
            cuisine: "陇菜",
            dishes: ["兰州拉面", "手抓羊肉", "河西羊羔肉", "酿皮"],
            description: "陇菜以牛羊肉为主，口味偏重，具有浓郁的西北风味。",
            image: "https://images.unsplash.com/photo-1563245372-f21724e3856d?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80"
        },
        "青海": {
            cuisine: "青海菜",
            dishes: ["手抓羊肉", "青海老酸奶", "尕面片", "焜锅馍"],
            description: "青海菜以牛羊肉、奶制品和面食为主，口味醇厚，具有高原特色。",
            image: "https://images.unsplash.com/photo-1563245372-f21724e3856d?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80"
        },
        "宁夏": {
            cuisine: "宁菜",
            dishes: ["手抓羊肉", "烩羊杂碎", "清蒸羊羔肉", "馓子"],
            description: "宁菜以牛羊肉为主，口味咸鲜，融合了回族等民族的饮食特色。",
            image: "https://images.unsplash.com/photo-1563245372-f21724e3856d?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80"
        },
        "新疆": {
            cuisine: "新疆菜",
            dishes: ["大盘鸡", "烤羊肉串", "手抓饭", "馕饼"],
            description: "新疆菜以牛羊肉、奶制品和面食为主，口味浓郁，具有浓郁的西域风情。",
            image: "https://images.unsplash.com/photo-1563245372-f21724e3856d?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80"
        },
        "台湾": {
            cuisine: "台湾菜",
            dishes: ["卤肉饭", "蚵仔煎", "大肠包小肠", "盐酥鸡"],
            description: "台湾菜融合了闽、粤饮食文化，口味清淡、鲜香，小吃文化丰富。",
            image: "https://images.unsplash.com/photo-1563245372-f21724e3856d?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80"
        },
        "香港": {
            cuisine: "港式粤菜",
            dishes: ["菠萝油", "丝袜奶茶", "云吞面", "咖喱鱼蛋"],
            description: "港式粤菜在传统粤菜基础上融合了西方饮食文化，口味多样。",
            image: "https://images.unsplash.com/photo-1563245372-f21724e3856d?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80"
        },
        "澳门": {
            cuisine: "澳门美食",
            dishes: ["葡挞", "猪扒包", "马介休球", "木糠布甸"],
            description: "澳门美食融合了中西方饮食文化，具有独特的风味。",
            image: "https://images.unsplash.com/photo-1563245372-f21724e3856d?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80"
        }
    };

    // 全局变量存储地图实例
    let myChart = null;
    let baiduMap = null;

    // 侧边信息框元素
    const leftInfo = document.getElementById('leftInfo');
    const rightInfo = document.getElementById('rightInfo');
    const mask = document.getElementById('mask');
    const closeLeft = document.getElementById('closeLeft');
    const closeRight = document.getElementById('closeRight');
    const leftContent = document.getElementById('leftContent');
    const rightContent = document.getElementById('rightContent');
    const infoTitle = document.getElementById('infoTitle');
    const rightInfoTitle = document.getElementById('rightInfoTitle');
    const provinceDishes = document.getElementById('provinceDishes');

    // 初始化ECharts地图（已修改标签显示逻辑，显示所有省份名称）
    function initMap() {
        myChart = echarts.init(document.getElementById('chinaMap'));
        // 模拟数据
        function randomData() {
            return Math.round(Math.random() * 500 + 300);
        }
        const mydata = Object.keys(provinceCenters).map(province => ({
            name: province,
            value: randomData()
        }));
        const option = {
            title: {
                text: '中国美食分布',
                subtext: '数据来源：中国餐饮协会 (2023)',
                textStyle: {
                    color: '#333',
                    fontSize: 22
                },
                subtextStyle: {
                    color: '#ff8c00',
                    fontSize: 14
                },
                left: 'center',
                top: 10
            },
            tooltip: {
                trigger: 'item',
                backgroundColor: 'rgba(255, 235, 205, 0.9)',
                borderColor: '#ff8c00',
                textStyle: {
                    color: '#333'
                },
                formatter: function (params) {
                    const province = params.name;
                    const info = cuisineData[province];
                    if (info) {
                        return `<b>${province}</b><br/>
                    菜系: ${info.cuisine}<br/>
                    代表菜: ${info.dishes.join('、')}<br/>
                    <small>${info.description}</small>`;
                    }
                    return `<b>${province}</b><br/>点击查看详细信息`;
                }
            },
            visualMap: {
                min: 300,
                max: 800,
                text: ['高', '低'],
                realtime: false,
                calculable: true,
                inRange: {
                    color: ['#ffebcd', '#ffdab9', '#ffa07a', '#ff7f50', '#ff6347']
                },
                textStyle: {
                    color: '#333'
                }
            },
            series: [{
                name: '美食热度',
                type: 'map',
                map: 'china',
                roam: true,
                label: {
                    show: true,
                    color: '#333',
                    fontSize: 10,
                    // 移除省份标签显示限制，显示所有名称
                    formatter: function (params) {
                        return params.name;
                    }
                },
                emphasis: {
                    label: {
                        color: '#333',
                        fontSize: 12
                    },
                    itemStyle: {
                        areaColor: '#ff8c00'
                    }
                },
                itemStyle: {
                    areaColor: '#ffebcd',
                    borderColor: '#ff8c00',
                    borderWidth: 1
                },
                data: mydata,
                // 控制南海诸岛显示
                mapLocation: {
                    y: 'bottom'
                },
                selectedMode: 'single'
            }]
        };
        myChart.setOption(option);
        // 添加点击事件监听器
        myChart.on('click', function (params) {
            const province = params.name;
            if (cuisineData[province]) {
                showProvinceInfo(province);
            }
        });
    }

    // 显示省份信息
    function showProvinceInfo(province) {
        const info = cuisineData[province];
        if (!info) return;

        // 填充左侧信息框内容
        infoTitle.textContent = `${province} - ${info.cuisine}`;
        leftContent.innerHTML = `
                <div class="province-cuisine">
                    <div class="cuisine-name">菜系介绍</div>
                    <p class="province-desc">${info.description}</p>
                    <div class="cuisine-name">代表菜品</div>
                    <ul class="dish-list">
                        ${info.dishes.map(dish => `<li>${dish}</li>`).join('')}
                    </ul>
                    <button onclick="showBaiduMap('${province}')">查看百度地图</button>
                </div>
            `;

        // 填充右侧信息框内容（菜品图片）
        rightInfoTitle.textContent = `${province}代表菜品`;
        provinceDishes.innerHTML = `
                <img src="${info.image}" alt="${province}美食" class="dish-image" style="grid-column: 1 / -1;">
                ${info.dishes.map(dish => `
                    <div style="text-align: center; padding: 10px; color: #ff8c00;">${dish}</div>
                `).join('')}
            `;

        // 显示侧边信息框和遮罩层
        leftInfo.classList.add('show');
        rightInfo.classList.add('show');
        mask.classList.add('show');
    }

    // 关闭侧边信息框
    function closeInfoBoxes() {
        leftInfo.classList.remove('show');
        rightInfo.classList.remove('show');
        mask.classList.remove('show');
    }

    // 初始化图表（已适配新色调）
    function initCharts() {
        // 柱状图
        const barChart = echarts.init(document.getElementById('barChart'));
        const barOption = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: ['川菜', '粤菜', '鲁菜', '苏菜', '浙菜', '湘菜'],
                axisLine: {
                    lineStyle: {
                        color: '#333'
                    }
                }
            },
            yAxis: {
                type: 'value',
                axisLine: {
                    lineStyle: {
                        color: '#333'
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: 'rgba(51, 51, 51, 0.1)'
                    }
                }
            },
            series: [{
                name: '销量',
                type: 'bar',
                data: [2450, 1890, 1680, 1560, 1420, 1350],
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: '#ff8c00' },
                        { offset: 1, color: '#ff6347' }
                    ])
                }
            }]
        };
        barChart.setOption(barOption);

        // 折线图
        const lineChart = echarts.init(document.getElementById('lineChart'));
        const lineOption = {
            tooltip: {
                trigger: 'axis'
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
                axisLine: {
                    lineStyle: {
                        color: '#333'
                    }
                }
            },
            yAxis: {
                type: 'value',
                axisLine: {
                    lineStyle: {
                        color: '#333'
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: 'rgba(51, 51, 51, 0.1)'
                    }
                }
            },
            series: [
                {
                    name: '火锅类',
                    type: 'line',
                    stack: '总量',
                    data: [120, 132, 101, 134, 90, 230, 210],
                    smooth: true,
                    lineStyle: {
                        color: '#ff8c00',
                        width: 3
                    }
                },
                {
                    name: '小吃类',
                    type: 'line',
                    stack: '总量',
                    data: [220, 182, 191, 234, 290, 330, 310],
                    smooth: true,
                    lineStyle: {
                        color: '#f72585',
                        width: 3
                    }
                }
            ]
        };
        lineChart.setOption(lineOption);

        // 饼图
        const pieChart = echarts.init(document.getElementById('pieChart'));
        const pieOption = {
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                right: 10,
                top: 'center',
                textStyle: {
                    color: '#333'
                }
            },
            series: [
                {
                    name: '菜系占比',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        borderRadius: 10,
                        borderColor: '#ffebcd',
                        borderWidth: 2
                    },
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '18',
                            fontWeight: 'bold',
                            color: '#ff8c00'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        { value: 28.5, name: '川菜', itemStyle: { color: '#f72585' } },
                        { value: 22.3, name: '粤菜', itemStyle: { color: '#7209b7' } },
                        { value: 18.7, name: '鲁菜', itemStyle: { color: '#3a0ca3' } },
                        { value: 15.2, name: '苏菜', itemStyle: { color: '#4361ee' } },
                        { value: 10.8, name: '浙菜', itemStyle: { color: '#4cc9f0' } },
                        { value: 4.5, name: '其他', itemStyle: { color: '#ff8c00' } }
                    ]
                }
            ]
        };
        pieChart.setOption(pieOption);

        // 响应窗口大小变化
        window.addEventListener('resize', function () {
            barChart.resize();
            lineChart.resize();
            pieChart.resize();
            if (myChart) myChart.resize();
        });
    }

    // 显示百度地图
    function showBaiduMap(province) {
        const center = provinceCenters[province];
        if (!center) return;

        document.getElementById('chinaMap').style.display = 'none';
        document.getElementById('baiduMapContainer').style.display = 'block';
        document.getElementById('backButton').style.display = 'block';

        baiduMap = new BMapGL.Map('baiduMapContainer');
        const point = new BMapGL.Point(center[0], center[1]);
        baiduMap.centerAndZoom(point, 10);
        baiduMap.addControl(new BMapGL.NavigationControl());
    }

    // 显示原有地图
    function showOriginalMap() {
        document.getElementById('baiduMapContainer').style.display = 'none';
        document.getElementById('backButton').style.display = 'none';
        document.getElementById('chinaMap').style.display = 'block';
    }

    // 事件监听
    closeLeft.addEventListener('click', closeInfoBoxes);
    closeRight.addEventListener('click', closeInfoBoxes);
    mask.addEventListener('click', closeInfoBoxes);

    // 页面加载完成后初始化
    window.onload = function () {
        initMap();
        initCharts();
    };
</script>
</body>

</html>